function initPlot() {

    $('#chart').children().remove();

    var pages           = [10, 15, 20, 25, 30, 35, 40, 45, 50, 10];
    var numVisits       = [4, 8, 20, 3, 6, 5, 30, 2, 6, 7];
    var uniqueVisitors  = [12, 6, 20, 11, 2, 3, 4, 2, 50, 5];

    var ticks = [
        ['23rd Feb'], 
        ['24th Feb'], 
        ['25th Feb'], 
        ['26th Feb'], 
        ['27th Feb'], 
        ['28th Feb'], 
        ['01st Mar'], 
        ['02nd Mar'], 
        ['03rd Mar'], 
        ['04th Mar']
    ];  

    var plot2 = $.jqplot('chart',[numVisits, uniqueVisitors, pages], {
        seriesColors: ["#f491a5", "#8fd1ff", "#ffee50"],
        animate: true,
        stackSeries: true,
        seriesDefaults: {
            lineWidth: 3,           // Width of the line in pixels.
            shadowAlpha: 0.05,
            fill: true,
            fillAndStroke: true,    // *stroke a line at top of fill area.
            fillAlpha: 0.7,         // *custom alpha to apply to fillColor.
            showMarker: true,       // render the data point markers or not.
            markerOptions: {
                show: true,             // wether to show data point markers.
                style: 'filledCircle',  // circle, diamond, square, filledCircle, filledDiamond or filledSquare.
                size: 8             // size (diameter, edge length, etc.) of the marker.
            }
        },
        series: [
            {label: 'Number of visits'},
            {label: 'Unique visitors'},
            {label: 'Pages'}
        ],
        legend: {
            show: true,
            placement: 'outsideGrid',
            location: 's'           // compass direction, nw, n, ne, e, se, s, sw, w.
        },
        highlighter: {
            show: true,
            showTooltip: false
        },
        axesDefaults:{
            pad: 1.05,
            tickOptions:{mark: 'outside'}
        },
        axes:{
            xaxis: {
                // same options as axesDefaults
                ticks: ticks,
                renderer: $.jqplot.CategoryAxisRenderer,
                rendererOptions:{
                    sortMergedLabels: false
                }
                /*tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions:{angle: -90}*/
            },
            yaxis: {
                min: 0
            }
        },
        grid: {
            drawGridLines: true,        // wether to draw lines across the grid or not.
            gridLineColor: '#ececec',    // *Color of the grid lines.
            background: '#fff',      // CSS color spec for background color of grid.
            borderColor: '#ececec',     // CSS color spec for border around grid.
            borderWidth: 1,           // pixel width of border around grid.
            shadow: false               // draw a shadow for grid.
        }
    });
}

$(document).ready(function(){
    initPlot();
    
    // capture the highlighters highlight event and show a custom tooltip.
    $('#chart').bind('jqplotHighlighterHighlight', 
        function (ev, seriesIndex, pointIndex, data, plot) {
            // create some content for the tooltip.  Here we want the label of the tick,
            // which is not supplied to the highlighters standard tooltip.
            /*var content = plot.series[seriesIndex].label + ', ' 
                        + plot.series[seriesIndex]._xaxis.ticks[pointIndex][1] + ', ' + data[1];*/
            var content = data[1];
            
            // get a handle on our custom tooltip element, which was previously created
            // and styled.  Be sure it is initiallly hidden!
            var cssObj = { 
                backgroundColor: plot.seriesColors[seriesIndex], 
                borderColor: plot.seriesColors[seriesIndex] 
            };
            var elem = $('#customTooltip');
            elem.css(cssObj);
            elem.find('div#tooltip-content').html(content);

            var newArrow = ".arrow:after{ background-color:" + plot.seriesColors[seriesIndex] 
                        + ";border-color:" + plot.seriesColors[seriesIndex] + ";}"
            $('style#arrow').html(newArrow);
            
            // Figure out where to position the tooltip.
            var h = elem.outerHeight();
            var w = elem.outerWidth();
            var left = ev.pageX - w/2;
            var top = ev.pageY - h - 10;
            // now stop any currently running animation, position the tooltip, and fade in.
            elem.stop(true, true).css({left:left, top:top}).fadeIn(200);
        }
    );
    
    // Hide the tooltip when unhighliting.
    $('#chart').bind('jqplotHighlighterUnhighlight', 
        function (ev) {
            $('#customTooltip').fadeOut(300);
        }
    );

    // resize event to re-generate the plot.
    $(window).resize(function() {
        initPlot();
    });
});